<template>
	<view class="pageItem">
		<view class="card has_total">
			<view class="total">
				<label class="num">{{userInfo.gold||'0.00'}}</label>{{$t('bean.current_bean')}}
			</view>


			<view class="select">
				<view class="s_tit">{{$t('bean.pay_title')}}</view>
				<view class="s_item">
					<block v-for="(item,index) in list" :key="'p_'+index">
						<view class="s_box" :class="item.id == s_id ? 's_box_s':''" @click="selectChange"
							:data-id="item.id">
							<view class="s_b_price" v-if="item.id != 0">
								{{$t('use.money_code')}}
								<label class="price">{{item.money}}
								</label>
							</view>
							<view class="s_b_price" v-if="item.id == 0">
								<label class="price">{{item.money}}
								</label>
							</view>
							<view class="s_b_bean" v-if="item.id != 0">
								{{parseInt(item.gold)}}<label class="bean">{{$t('use.bean')}}</label>
							</view>
							<view class="s_b_bean" v-if="item.id == 0">
								{{item.gold}}
							</view>
							<image class="bean_bg" src="/static/other/bean.png" mode="widthFix"></image>
							<view class="iconfont icon" v-if="item.id == s_id">&#xe730;</view>
						</view>
					</block>
				</view>

				<view class="money_item" v-if="s_id == 0">
					<view class="code">{{$t('use.money_code')}}</view>
					<input class="m_input" type="digit" v-model="money" :placeholder="$t('balance.cash_number_tip')" />
					<view class="num" v-if="money">{{money*10}} {{$t('popular.bean')}} </view>
					<view class="iconfont del" @click="delInput">&#xeba0;</view>
				</view>

			</view>

		</view>

		<view class="card">
			<view class="select">
				<view class="s_tit">{{$t('bean.pay_type')}}</view>
				<view class="pay_item" v-if="appLocale">
					<block v-for="(item,index) in payArr[appLocale]" :key="'p_'+index">
						<view class="row" @click="payChange" :data-id="item.id">
							<image class="logo" :src="item.logo" mode="widthFix"></image>
							<view class="text">{{item.txt}}</view>
							<view class="iconfont select" v-if="item.id == p_id">&#xe730;</view>
						</view>
					</block>
				</view>
			</view>
		</view>

		<!-- 	<view class="card" v-if="p_id == 'usdt'">
			<view class="address_item">
				<view class="add_tit">{{$t('bean.pay_address')}}</view>
				<view class="row2">
					<view class="text2">{{tron_code}}</view>
					<view class="iconfont copy" @click="copyFun">&#xe6cd;</view>
				</view>
			</view>
		</view> -->

		<view class="balance_item" v-if="p_id == 'balance'">
			<view class="b_tit">{{$t('balance.current_balance')}}</view>
			<view class="b_txt">{{userInfo.user_money || '0.00'}}</view>
		</view>
		<view class="tip_item">
			<view class="t_tit">{{$t('use.tip_title')}}</view>
			<view class="t_txt">{{$t('bean.pay_tip')}}</view>
		</view>
		<view class="_footer">
			<view class="agree">
				<view class="iconfont a_icon" v-if="!agree" @click="agreeChange(true)">&#xe731;</view>
				<view class="iconfont a_icon a_icon_s" v-if="agree" @click="agreeChange(false)">&#xe730;</view>
				<view class="a_txt">
					{{$t('public.agree_txt')}}
					<view class="a_t2" @click="$r('/pages/news/newsDetail?ori=pay')">《{{$t('public.pay_bean_cc')}}》
					</view>
				</view>
			</view>
			<view class="btn sub" @click="payFun">{{$t('bean.pay_btn')}}</view>
		</view>
		<view class="bg_item"></view>

		<!-- <canvas canvas-id="canvas" style="width:36vw; height:36vw;" id="canvas"></canvas> -->

	</view>
</template>

<script>
	// import Web3 from 'web3';



	import {
		mapState
	} from 'vuex';
	import helper from '@/common/helper.js';
	import qrcode from '@/common/wxqrcode.js'
	export default {
		data() {
			return {
				beans: '',
				// 二维码绘制对象
				qrcode: null,
				// 二维码尺寸，单位 rpx
				qrcodeSize: 280,
				// 二维码背景颜色
				qrcodeBgColor: '#FFFFFF',
				// 二维码颜色
				qrcodeColor: '#000000',
				// 画布 id
				qrcodeId: 'canvas',

				agree: false,
				tron_code: '',
				s_id: '1',
				list: [],
				priceArr: [{
						id: 1,
						price: '39.9',
						bean: '399'
					}, {
						id: 2,
						price: '69.9',
						bean: '699'
					},
					{
						id: 3,
						price: '88.8',
						bean: '888'
					}, {
						id: 4,
						price: '99.9',
						bean: '999'
					}
				],
				p_id: 'usdt',
				payArr: {
					"en": [
						// {
						// 	id: 'paypal',
						// 	logo: '/static/pay/paypal.png',
						// 	txt: 'Paypal'
						// },
						// {id:'stripe',logo:'../../static/pay/stripe.png',txt:'Stripe'},
						{
							id: 'usdt',
							logo: '../../static/pay/USDT.png',
							txt: 'USDT'
						},
						{
							id: 'balance',
							logo: '../../static/pay/balance.png',
							txt: 'balance'
						}
					],

					"zh-Hant": [
						// {
						// 	id: 'paypal',
						// 	logo: '/static/pay/paypal.png',
						// 	txt: 'Paypal'
						// },
						// {id:'stripe',logo:'../../static/pay/stripe.png',txt:'Stripe'},
						{
							id: 'usdt',
							logo: '../../static/pay/USDT.png',
							txt: 'USDT'
						},
						{
							id: 'balance',
							logo: '../../static/pay/balance.png',
							txt: '餘額'
						}
						//{id:'alipay',logo:'/static/pay/alipay.png',txt:'支付宝'},
						// {id:'wxpay',logo:'/static/pay/wxpay.png',txt:'微信'},
					],

					"jp": [
						// {
						// 	id: 'paypal',
						// 	logo: '../../static/pay/paypal.png',
						// 	txt: 'Paypal'
						// },
						// {id:'stripe',logo:'../../static/pay/stripe.png',txt:'Stripe'},
						{
							id: 'usdt',
							logo: '../../static/pay/USDT.png',
							txt: 'USDT'
						},
						{
							id: 'balance',
							logo: '../../static/pay/balance.png',
							txt: '残高'
						}
					]
				},
				appLocale: '',
				userInfo: {},
				money: '',
				recharge_config: {},
			};
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onLoad() {
			this.initData();

			this.appLocale = uni.getLocale();
		},
		onShow() {
			this.getMyData();
		},
		methods: {
		},	
	}
</script>

<style lang="scss">
	.pageItem {
		padding-bottom: 28vw;
	}

	.bg_item {
		@include bg_item(90vw);
	}

	.has_total {
		padding-top: 15vw !important;

		.select {
			padding-top: 3vw !important;
		}
	}

	.card {
		@include card_style();
		position: relative;
		z-index: 2;
		width: 92%;
		margin-left: 4%;
		margin-top: 4vw;
		display: inline-block;
		overflow: hidden;

		.total {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			height: 15vw;
			background: $main_color_s2;
			padding: 1vw 4vw 0;
			display: flex;
			align-items: center;
			font-size: 3.6vw;
			color: #fff;

			.num {
				font-size: 6vw;
				padding: 0 2vw 1vw 0;
			}
		}

		.select {
			width: 100%;

			.s_tit {
				font-size: 3.8vw;
				color: $main_color5;
				font-weight: bold;
				padding-bottom: 1vw;
			}

			.s_item {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.s_box:not(:nth-child(2n+1)) {
					margin-left: 2%;
				}

				.s_box {
					width: 49%;
					margin-top: 2vw;
					border-radius: 2vw;
					background: #F8F6F7;
					padding: 3vw 2vw;
					position: relative;

					.s_b_price {
						width: 100%;
						text-align: center;
						font-size: 4vw;
						font-weight: bold;
						color: #222;
						position: relative;
						z-index: 2;

						.price {
							font-size: 4.5vw;
						}
					}

					.s_b_bean {
						width: 100%;
						text-align: center;
						font-size: 3.2vw;
						color: #222;
						padding-top: 1vw;
						position: relative;
						z-index: 2;

						.bean {
							padding-left: 1vw;
						}
					}

					.icon {
						position: absolute;
						z-index: 2;
						font-size: 4vw;
						color: $main_color5;
						left: 2vw;
						top: 2vw;
					}

					.bean_bg {
						position: absolute;
						z-index: 1;
						width: 8vw;
						bottom: 1vw;
						right: 1vw;
					}
				}

				.s_box_s {
					background: $main_color_s2;

					.s_b_price {
						color: $main_color5;
					}

					.s_b_bean {
						color: $main_color5;
					}
				}
			}

			.pay_item {
				width: 100%;

				.row {
					width: 100%;
					display: flex;
					align-items: center;
					margin-top: 6vw;

					.logo {
						width: 6vw;
					}

					.text {
						flex: 1;
						font-size: 4vw;
						font-weight: bold;
						color: $main_color5;
						padding: 0 3vw;
					}

					.select {
						width: 4.3vw;
						color: $main_color;
					}
				}
			}
		}

		.money_item {
			width: 100%;
			margin-top: 3vw;
			padding: 1vw 0;
			border-bottom: 1rpx solid #f0efef;
			display: flex;
			align-items: center;

			.code {
				font-size: 4vw;
				color: $main_color4;
				font-weight: bold;
			}

			.m_input {
				flex: 1;
				padding: 0 4vw;
				font-size: 4.5vw;
				color: $main_color5;
				height: 10vw;
				line-height: 10vw;
			}

			.num {
				color: #ECAB05;
				font-size: 3.2vw;
				margin-right: 2vw;
			}

			.del {
				color: #b6b6b6;
				font-size: 5vw;
			}
		}
	}

	.address_item {
		width: 100%;

		.add_tit {
			font-size: 3.8vw;
			color: $main_color5;
			font-weight: bold;
			padding-bottom: 1vw;
		}

		.row2 {
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 2vw;

			.text2 {
				flex: 1;
				font-size: 4vw;
				color: $main_color5;
				@include text_over_style(1);
				display: block;
			}

			.copy {
				font-size: 6vw;
				color: $main_color_s2;
				margin-left: 4vw;
			}
		}
	}

	.balance_item {
		@include card_style();
		width: 92%;
		margin-left: 4%;
		background: $main_color2_s;
		display: flex;
		align-items: center;
		margin-top: 4vw;

		.b_tit {
			font-size: 4vw;
			font-weight: bold;
			color: $main_color5;
			flex: 1;
		}

		.b_txt {
			font-size: 4vw;
			font-weight: bold;
			color: $main_color_s2;
		}
	}

	.tip_item {
		width: 100%;
		padding: 4vw 4%;

		.t_tit {
			width: 100%;
			font-size: 3.6vw;
			color: $main_color5;
			font-weight: bold;
		}

		.t_txt {
			padding-top: 3vw;
			font-size: 3.5vw;
			color: $main_color4;
			line-height: 5.5vw;
		}
	}

	._footer {
		@include page_button();
		background: $main_bg_color;
		position: fixed;
		z-index: 98;
		bottom: 0;
		left: 0;
		height: 28vw;
		padding: 9vw 0 6vw;

		.agree {
			position: absolute;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 2.8vw;
			color: #999999;
			top: 1vw;

			.a_icon {
				width: 3.3vw;
				height: 3.3vw;
				font-size: 2.8vw;
				color: #C8C8C8;
				margin-right: 2vw;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.a_icon_s {
				color: $main_color;
			}

			.a_txt {
				display: flex;
				align-items: center;
				line-height: 4vw;

				.a_t2 {
					color: $main_color;
				}
			}
		}
	}
</style>